<template>
	<view class="main">
		<view class="wode">
				<view style="margin:40rpx 38rpx;display:flex;align-items:center;"  v-if="Object.keys(userInfo).length">
					<view class="head" @click="navTo('/pages/edit/edit')">
						<u-image :src="userInfo.avatar" mode=""
						width="110rpx" height="110rpx"  shape="circle">
							<u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="110rpx" height="110rpx" />
						</u-image>
						<u-image :src="`../../static/wode/LV${userInfo.level}.png`" mode=""
						style="margin-top: -24rpx;margin-left: 8rpx;" width="95rpx" height="39rpx" >
							<u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/wode/LV1.png" width="95rpx" height="39rpx" />
						</u-image>
					</view>
					<view class="name" @click="navTo('/pages/edit/edit')">
						<view class="player">
							{{userInfo.nickname}}
						</view>
						<u-image src="../../static/wode/edit.png" mode=""
						style="width: 27rpx;height: 26rpx;margin-left: 14rpx; "></u-image>
					</view>
					<view class="service" style="margin-left:auto;" @click="toWindow(systemInfo.service_url)" v-if="systemInfo.service_url">
						<image src="../../static/wode/service.png" mode=""
						style="width: 98rpx;height: 98rpx;"></image>
					</view>
				</view>
				<view style="margin:40rpx 38rpx;display:flex;align-items:center;"  v-else>
					<view class="head"  @click="navTo('/pages/login/login')">
						<u-image src="../../static/wode/morentouxiang.png" mode=""
						style="width: 110rpx;height: 110rpx;"  shape="circle"></u-image>
					</view>
					<view class="name" @click="navTo('/pages/login/login')">
						<view class="login">
							{{$t("wode.login")}}
						</view>
					</view>
					<view class="service" style="margin-left:auto;" @click="toWindow(systemInfo.service_url)" v-if="systemInfo.service_url">
						<image src="../../static/wode/service.png" mode=""
						style="width: 98rpx;height: 98rpx;"></image>
					</view>
				</view>
			<view class="info"  @click="navTo('/pages/funding/funding')" v-if="Object.keys(userInfo).length">
				<!-- <view class="service" @click="toWindow(systemInfo.service_url)" v-if="systemInfo.service_url">
					<image src="../../static/wode/service.png" mode=""
					style="width: 98rpx;height: 98rpx;"></image>
				</view> -->
				<!-- <view class="setting" @click="navTo('/pages/Myevaluation/Myevaluation')">
					<image src="../../static/wode/set.png" mode=""
					style="width: 54rpx;height: 51rpx;"></image>
				</view> -->
				
				
				<view class="detail" style="margin:0 20rpx;border-bottom:1rpx solid #ECECEC;" v-if="Object.keys(userInfo).length">
					<view class="balance" style="border:none;">
						<view class="count" style="font-size:50rpx;">
							{{$currency}}{{userInfo.money || 0}}
						</view>
						<view class="font">
							{{$t("wode.balance")}}
						</view>
					</view>
				</view>
				<view class="detail" v-if="Object.keys(userInfo).length">
				
					<view class="today" style="border:none;">
						<view class="count">
							{{$currency}}{{userInfo.today_earning || 0}}
						</view>
						<view class="font">
							{{$t("wode.today")}}
						</view>
					</view>
					<view class="revenue">
						<view class="count">
							{{$currency}}{{userInfo.total_earning || 0}}
						</view>
						<view class="font">
							{{$t("wode.total")}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="select" v-if="showTopup">
			<view class="top-up" @click="navTo('/pages/pay/pay')">
				<u-image src="../../static/wode/recharge.png" mode=""
				style="width: 48rpx;height: 39rpx; margin: 30rpx auto 15rpx;"></u-image>
				<view class="up">
					{{$t("wode.top")}}
				</view>
			</view>
			<view class="withdraw" @click="navTo('/pages/withdraw/takecrash')">
				<u-image src="../../static/wode/tackcrash.png" mode=""
				style="width: 48rpx;height: 39rpx;margin: 30rpx auto 15rpx; "></u-image>
				<view class="up">
					{{$t("wode.with")}}
				</view>
			</view>
		</view>
		<!-- <view class="used">
			<view class="function">
				<view class="yuan1">
				</view>
				<view class="function1">
					<view class="yuan2">
					</view>
					<view class="function2">
							{{ $t("wode.used")}}
					</view>
				</view>
			</view>
			<view class="type">
				<view class="commonly" @click="navTo('../warehouse/warehouse')">
					<u-image src="../../static/wode/warehouse.png" mode=""
					style="width: 48rpx;height: 46rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("wode.house")}}
				</view>
				<view class="commonly" @click="navTo('../order/order')">
					<u-image src="../../static/wode/order.png" mode=""
					style="width: 46rpx;height: 51rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("wode.my")}}
				</view>
				<view class="commonly" @click="navTo('../funding/funding')" v-if="showTopup">
					<u-image src="../../static/wode/cash.png" mode=""
					style="width: 48rpx;height: 51rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("wode.fun")}}
				</view>
				<view class="commonly"  @click="navTo('../Addressmanagement/Addressmanagement')">
					<u-image src="../../static/wode/adress.png" mode=""
					style="width: 46rpx;height: 51rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("wode.add")}}
				</view>
				<view class="commonly" @click="navTo('../bank/bank')" v-if="showTopup">
					<u-image src="../../static/wode/bankcount.png" mode=""
					style="width: 56rpx;height: 51rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("wode.bank")}}
				</view>
				<view class="commonly" @click="navTo('../team/invite')" v-if="showTopup">
					<u-image src="../../static/wode/invite.png" mode=""
					style="width: 48rpx;height: 50rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("wode.invite")}}
				</view>
				<view class="commonly" @click="navTo('../member/member')">
					<u-image src="../../static/wode/vip.png" mode=""
					style="width: 54rpx;height: 49rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("new.membership")}}
				</view>
				<view class="commonly" @click="navTo('../Myevaluation/Myevaluation')">
					<u-image src="../../static/wode/set.png" mode=""
					style="width: 54rpx;height: 51rpx;margin: 0rpx auto 26rpx; "></u-image>
					{{ $t("wode.set")}}
				</view>
			</view>
		</view> -->
		<!-- <view class="platform">
			<view class="is">
				<view class="yuan1">
				</view>
				<view class="is1">
					<view class="yuan2">
					</view>
					<view class="is2">
							{{ $t("wode.is")}}
					</view>
				</view>
			</view> -->
<!-- 			<view class="introduce">
				<view class="types" @click="navTo('../home/help')" v-if="showTopup">
					<u-image src="../../static/wode/reduce.png" mode=""
					style="width: 33rpx;height: 38rpx; margin: 0rpx 0 0rpx 0rpx;"></u-image>
					<view class="text">{{ $t("wode.introdution")}}</view>
					<u-image src="../../static/wode/next.png" mode=""
					style="width: 15rpx;height: 27rpx;margin-left: 26rpx;
					margin-top: 4rpx;"></u-image>
				</view>
				<view class="types" @click="navTo('../wode/aboutus')">
					<u-image src="../../static/wode/about.png" mode=""
					style="width: 39rpx;height: 40rpx; margin: 0rpx 0 0rpx 0rpx;"></u-image>
					<view class="text">{{ $t("wode.about")}}</view>
					<u-image src="../../static/wode/next.png" mode=""
					style="width: 15rpx;height: 27rpx;margin-left: 26rpx;
					margin-top: 4rpx;"></u-image>
				</view>
			</view> -->
		<!-- </view> -->
		
		<!-- 滚动部分 -->
		<scroll-view class="zy-scroll zy-page-padding" scroll-y>
			<!-- cell-1 -->
			<view class="zy-bg-white-r30 zy-mt-lg zy-pv-lg">
				<view class="zy-row-between zy-mh zy-mb">
					<view class="zy-text-black-lg"> Baki akaun </view>
					<view class="zy-row">
						<view class="zy-text-gray-sm">Tambah nailai pengeluarn</view>
						<zy-arrow-right></zy-arrow-right>
					</view>
				</view>
				<zy-line></zy-line>
				<view class="zy-row-center zy-mt">
					<view class="zy-text-main-lg-bold">₱</view>
					<view class="zy-text-main-lg-super-bold zy-ml-sm">4,987.51</view>
				</view>
			</view>
			<!-- cell-2 -->
			<view class="zy-bg-white-r30 zy-mt-lg zy-pv-lg">
				<view class="zy-row-between zy-mh zy-mb">
					<view class="zy-text-black-lg"> keuntungan saya </view>
					<view class="zy-row">
						<view class="zy-text-main zy-font-bold">₱</view>
						<view class="zy-text-main-lg-bold zy-ml-sm">1999.00</view>
						<zy-arrow-right></zy-arrow-right>
					</view>
				</view>
				<zy-line></zy-line>
				<view class="zy-row-center zy-mt">
					<view class="zy-column-center zy-flex-width">
						<view class="zy-text-gray-sm">Subsidi iklan</view>
						<view class="zy-row">
							<view class="zy-text-main-sm zy-font-bold">₱</view>
							<view class="zy-text-main zy-font-bold zy-ml-sm">1999.00</view>
						</view>
					</view>
					<view class="zy-column-center zy-flex-width">
						<view class="zy-row-center zy-text-gray-sm" style="text-align: center;">Komisen penjualan</view>
						<view class="zy-row">
							<view class="zy-text-main-sm zy-font-bold">₱</view>
							<view class="zy-text-main zy-font-bold zy-ml-sm">1999.00</view>
						</view>
					</view>
					<view class="zy-column-center zy-flex-width">
						<view class="zy-text-gray-sm">Komisen promosi</view>
						<view class="zy-row">
							<view class="zy-text-main-sm zy-font-bold">₱</view>
							<view class="zy-text-main zy-font-bold zy-ml-sm">1999.00</view>
						</view>
					</view>
				</view>
			</view>
			<!-- cell-3 -->
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell1.png" label="Baucar saya" @click="toRecharge"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell2.png" label="Laporan setiap minggu" @click="toRechargeNilai"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell3.png" label="Bonus wang tunai" @click="toWithdrawList"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell4.png" label="Jemput rakan" @click="toWithdraw"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell5.png" label="Perkhidmatan pelangan" @click="toBuyVip"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell6.png" label="Memuatkan turun Aplikasi" @click="toComplete"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell7.png" label="Pemberitahuan" @click="toShare"></mine-cell-item>
			<!-- 按钮 -->
			<zy-button class="zy-mt-50" content="Next" @click="toOrderZone50"></zy-button>
		</scroll-view>
		
		


		<u-mask :show="levelupShow" :zoom="false" class="flex-mask">
            <view class="nogoods-box">
				<view style="height:495rpx;width: 100%;">
					<view style="color:#FFF;font-size:32rpx;padding:36rpx 0;margin:0 45rpx;">
						<view style="height:29rpx;line-height:29rpx;flex:1;padding-left:29rpx;font-size:36rpx;">{{$t('new.congrat')}}</view>
					</view>
					<view class="u-flex u-row-center" style="color: #FFF;font-size: 40rpx;margin-top: 40rpx;">
						{{levelupInfo.old_level_name}}
						<image src="@/static/image/home/level_arrow.png" style="width: 75rpx;height: 28rpx;margin:0 30rpx;" mode="" />
						{{levelupInfo.new_level_name}}
					</view>
					<view style="padding: 30rpx 25rpx;display:flex;flex-direction:column;justify-content: space-between;color:#C1C3D0;font-size: 30rpx;background:url(../../static/image/home/item_bg.png) no-repeat;background-size: 630rpx 208rpx;width:630rpx;height:208rpx;margin:auto;margin-top: 37rpx;">
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('new.dailyincome')}}</view>
							<view style="flex:1;">{{$currency + levelupInfo.old_daliy_income}}</view>
							<image src="@/static/image/home/item_arrow.png" style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{$currency + levelupInfo.new_daliy_income}}</view>
						</view>
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('member.ratelabel')}}</view>
							<view style="flex:1;">{{levelupInfo.old_level_rate}}</view>
							<image src="@/static/image/home/item_arrow.png" style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{levelupInfo.new_level_rate}}</view>
						</view>
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('new.createagroup')}}</view>
							<view style="flex:1;">{{levelupInfo.old_open_group_num}}</view>
							<image src="@/static/image/home/item_arrow.png" style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{levelupInfo.new_open_group_num}}</view>
						</view>
					</view>
				</view>
                <view class="inside">
                    <view class="u-flex u-row-center" style="margin-bottom: 10rpx;">
						<image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;" mode="" />
						<view style="margin: 0 15rpx;color:#878D9C;font-size:34rpx;">{{$t('new.recommendpro')}}</view>
						<image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;transform: rotateY(180deg);--webkit-transform:rotateY(180deg);" mode="" />
					</view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;" v-if="levelupInfo.goodlist && levelupInfo.goodlist.list">
                        <view class="item" v-for="(item, index) in levelupInfo.goodlist.list" v-if="index < 2" :key="index" @click="navTo('../goods/good', {id: item.id,categoryid: upgrade.goodlist.id})">
							<view class="item-show">
								<image :src="item.cover_image" mode=""></image>
							</view>
                           <view class="header-price">
                                <image src="@/static/image/home/angle_icon.png" style="width:18rpx; height:16rpx;" mode="" />
                                <view>
                                    +{{$currency}}{{item.rewards}}{{$t('home.perday')}}
                                </view>
                            </view>
							<view class="item-text">
								<view class="item-name u-line-1" style="font-size:24rpx;word-break:break-word;">{{item?item.name:''}}</view>
								<view class="item-count">
									{{ $currency }}{{ item.price }}
								</view>
								<view class="remain_bg">
									<image src="@/static/image/home/person_icon.png" style="width: 18rpx;height:17rpx;margin-right:11rpx;" mode="" />
									<view>{{ $t('home.persongroup', {num:item?item.group_buy_num:''}) }}</view>
								</view>
							</view>
						</view>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="levelupShow = false"></u-image>
		</u-mask>
		<userlog :showPopup="showLogin"></userlog>
		<tabbar page="/pages/wode/wode"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: false,
				showLogin: false,
				showTopup: true,

				levelupInfo: {},
				levelupShow: false,
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			if (this.platform == 'ios' && (this.systemInfo.is_audited == undefined || this.systemInfo.is_audited == '0')) {
				this.showTopup = false;
			}
			// #endif
			if (uni.getStorageSync('oned_token')) {
				this.$store.dispatch('getUserInfo')
			}
		},
		watch: {
			'$store.getters.upgrade': {
				handler(newValue){
					console.log(newValue);
					if (Object.keys(this.$store.getters.userInfo).length == 0) {
						return;
					}
					if (Object.keys(newValue).length > 0) {
						this.levelupShow = true;
						this.levelupInfo = newValue;
						setTimeout(() => {
							this.$store.commit('SET_USER_UPGRADE', JSON.stringify({}))
							uni.setStorageSync('upgrade', JSON.stringify({}))
						}, 2000);
					}
				},
				immediate: true
			},
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {}
			},
			systemInfo() {
				return this.$store.getters.systemInfo || {}
			},
			platform() {
				return this.$store.getters.platform || ''
			}
		},
		methods: {
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						if (i == 'url') {
							param += `${i}=${encodeURIComponent(data[i])}&`
						} else {
							param += `${i}=${data[i]}&`
						}
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
			async toWindow(val) {
				const item = val;
				// type 1内链 2外链 3 调起whatsapp
				if (item.indexOf('http') > -1) {
					// #ifdef APP-PLUS
					this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					// #endif
					// #ifndef APP-PLUS
					if (item.indexOf('t.me') > -1 || item.indexOf('wa.me') > -1) {
						window.open(item)
					} else {
						this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					}
					// #endif
				} else {
					uni.navigateTo({
						url: item
					})
				}
			},
		},
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss">
		.main {
			
			padding-bottom: 120rpx;
		}
		
		.wode{
			padding-top: var(--status-bar-height);
			background: linear-gradient(0deg, #FF6D1B 0%, #FF8E20 100%);
			background-size: 750rpx 320rpx;
			background-repeat: no-repeat;
			overflow: hidden;
			.info{
				overflow: hidden;
				position: relative;
				width: 690rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 30rpx 30rpx 0;
				padding-bottom: 20rpx;
				.service{
					position: absolute;
					left: 0;
					margin-right: 5rpx;
				}
				.setting{
					position: absolute;
					border-radius: 50%;
					right: 15rpx;
					top: 15rpx;
				}
			}
			.head{
				height: 110rpx;
				width: 110rpx;
			}
			.name{
				display: flex;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #fff;
				justify-content: center;
				.player{
					margin-left: 41rpx;
					line-height: 28rpx;
				}
				.login{
					margin-left: 41rpx;
					font-size: 32rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #fff;
					line-height: 32rpx;
				}
			}
			.detail{
				display: flex;
				padding: 34rpx;

				text-align: center;
				.balance,.today,.revenue{
					flex:1;
					border-left: 2rpx solid #ECECEC;
					.count{
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi;//rubick;
						font-weight: 400;
						color: #0F0F0E;
						line-height: 36rpx;
					}
					.font{
						margin-top: 22rpx;
						font-size: 24rpx;
						font-family: Rubik;
						font-weight: 400;
						color: #AAAAAA;
						line-height: 24rpx;
					}
					
				}
			}
		}
		.select{
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
			.top-up{
				width: 335rpx;
				height: 146rpx;
				background-image: url(../../static/wode/rechargebgi.png);
				background-size: 100%;
			}
			.withdraw{
				width: 335rpx;
				height: 146rpx;
				background-image: url(../../static/wode/takecrashbgi.png);
				background-size: 100%;
			}
		}
		.up{
			font-size: 36rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
		}
		
		.used{
			overflow: hidden;
			width: 690rpx;
			background: #FFFFFF;
			padding-bottom: 40rpx;
			border-radius: 20rpx;
			margin: 0 30rpx 30rpx 30rpx;
			.function{
				.yuan1{
					margin-top: 20rpx;
					margin-left: 46rpx;
					width: 16rpx;
					height: 16rpx;
					background: $u-type-primary;
					border-radius: 50%;
				}
				.function1{
					display: flex;
					.yuan2{
						margin-left: 20rpx;
						width: 30rpx;
						height: 30rpx;
						background: $u-type-primary;
						border-radius: 50%;
					}
						
					.function2{
						font-size: 32rpx;
						font-family: Rubik;
						font-weight: 500;
						color: #0F0F0E;
						margin-top: -12rpx;
						margin-left: -6rpx;
					}
				}
			}
		}
		.type{
			// margin-top: 43rpx;
			display: flex;
			flex-wrap: wrap;
			.commonly{
				margin-top: 43rpx;
				width: 172rpx;
				font-size: 22rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				text-align: center;
				line-height: 22rpx;
			}
			
		}
		.platform{
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-left: 30rpx;
			overflow: hidden;
			.is{
				.yuan1{
					margin-top: 20rpx;
					margin-left: 46rpx;
					width: 16rpx;
					height: 16rpx;
					background: $u-type-primary;
					border-radius: 50%;
				}
				.is1{
					display: flex;
					.yuan2{
						margin-left: 20rpx;
						width: 30rpx;
						height: 30rpx;
						background: $u-type-primary;
						border-radius: 50%;
					}
						
					.is2{
						font-size: 32rpx;
						font-family: Rubik;
						font-weight: 500;
						color: #0F0F0E;
						margin-top: -12rpx;
						margin-left: -6rpx;
					}
				}
			}
		}
		
		.introduce{
			padding: 7rpx 40rpx 0;
			.types{
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #ECECEC;
				font-size: 28rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
				line-height: 28rpx;
				padding: 40rpx 0;
				.text {
					flex:1;
					text-align: end;
				}
			}
		}

.nogoods-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
		background-image: linear-gradient(0deg, #272733 28.999999999999996%, #494E60 100%);
		background-repeat: no-repeat;
        background-size: 670rpx 495rpx;
		background-color: #FFF;
		min-height: 495rpx;
        border-radius: 20rpx;
        text-align: center;
        .inside {
            margin:auto;
            margin-bottom: 30rpx;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .go-btn {
                height: 60rpx;
                width: 160rpx;
            }
        }
        .header-price {
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FC3E32;
            font-size: 32rpx;
        }
        .item {
            position: relative;
            border-radius: 15rpx;
            background-color: #fff;
            border: 1rpx solid #C17C1C;
            width: 250rpx;
            margin: 0 10rpx;
            opacity: 1;

            .item-show {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 190rpx;
                position: relative;
                // background-color: #fff;

                .item-show-prize {
                    white-space: nowrap;
                    width: 184rpx;
                    height: 42rpx;
                    opacity: 1;
                    background: #90b9ff;
                    border-radius: 20rpx 20rpx 0rpx 0rpx;
                    line-height: 42rpx;
                    font-size: 24rpx;
                    font-family: Roboto, Roboto-Medium;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #ffffff;
                    text-align: center;
                    position: absolute;
                    bottom: -2rpx;
                    z-index: 970;
                }

                image {
                    z-index: 99;
                    // width: 160rpx;
                    // height: 160rpx;
                    max-width: 250rpx;
                    max-height: 190rpx;
                    // margin-top: -62rpx;
                    opacity: 1;
                    border-radius: 15rpx 15rpx 0 0;
                    // box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(142, 164, 212, 0.50);
                }
            }

            .item-text {
                display: flex;
                flex-direction: column;
                width: 100%;
                // height: 106rpx;
                padding: 12rpx 0 12rpx 16rpx;
                border-top: none;
                border-radius: 0 0 20rpx 20rpx;

                .item-name {
                    width: 100%;
                    font-size: 28rpx;
                    font-family: Roboto, Roboto-Medium;
                    font-weight: bold;
                    margin-top: 6rpx;
                }

                .item-num {
                    font-size: 28rpx;
                    color: #FC3E32;
                    font-family: DIN, DIN-Regular;
                    font-weight: 400;
                }

                .item-count {
                    margin-top: 6rpx;
                    font-size: 32rpx;
                    font-family: DIN, DIN-Medium;
                    font-weight: bold;
                    // color: #b9b9b9;
                    color: #FC3E32;
                }
                .remain_bg {
                    display: flex;
                    font-size: 24rpx;
                    color:#AAA;
                    height: 34rpx;
                    line-height: 36rpx;
                    // background: url(@/static/image/home/remain_bg.png) no-repeat;
                    background-size: 100% 100%;
                    align-items: center;
                }

                .item-line {
                    width: 100%;
                    margin: -8rpx 20rpx;
                }
            }
        }
    }
	.flex-mask {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
